import Form from './Form';
import OceanComponent from './OceanComponent';
import OTableTemplate from '../../template/TableTemplate.vue';
import Pagination from './Pagination';
import Table from './Table';
import Buttons, { TButtonProps } from './Button';

type TableTemplateProps = {
  title?: string;
  query?: Function;
  rowKey?: Function;
  auth?: string[];
};

interface ITableTemplate {
  button(name: string, props?: TButtonProps);
  query();
}

class TableTemplate<T = any, F = any>
  extends OceanComponent<TableTemplateProps>
  implements ITableTemplate
{
  buttons: Buttons;
  form: Form<F>;
  table: Table<T>;
  pagination: Pagination;
  constructor(attrs: TableTemplateProps) {
    super(OTableTemplate, attrs);

    this.buttons = new Buttons({
      type: 'group',
    });

    this.form = new Form<F>({
      cols: '1 400:2 600:3 800:4 1000:5',
      collapsed: false,
      collapsedRows: 1,
    });

    this.table = new Table<T>({
      size: 'small',
    });

    this.pagination = new Pagination({
      onUpdated: () => {
        this.query();
      },
    });
  }
  query() {
    if (!this.attrs.query) return;
    let formData = this.form.model;
    let pageData = this.pagination && this.pagination.getPageData();
    this.attrs.query({ ...formData, ...pageData });
  }

  button(name: string, props?: TButtonProps) {
    return this.buttons.button(name, props);
  }
}

export default TableTemplate;
export type { TableTemplateProps };
